@(projectName: Seq[String], proname: String, host: String)(implicit session: Session)
    @fileupload.main("数据导入（PE）", projectName, proname, host) {

        <style>
                label {
                    text-indent: 2em;
                }

        </style>

        <div class="row-fluid">

            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="portlet blue-soft box">

                        <div class="portlet-title">
                            <div class="caption">
                                数据导入（PE）
                            </div>
                        </div>

                        <div class="portlet-body">

                            <form class="registration-form form-horizontal" id="UpdateForm" method="get"
                            accept-charset="UTF-8">

                                <div class="form-group" style="display: none;">
                                    <div class="col-sm-6 indent">
                                        <input name="proname" id="proname" class="form-control" value="@proname" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-12">样品名:</label>
                                    <div class="col-sm-4 indent">
                                        <input name="sample" id="sample" class="form-control" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-12">fastq 1 文件（左端）:</label>
                                    <div class="col-sm-4 indent">
                                        <input id="input-1" type="file" class="file" name="file1" data-show-preview="false"
                                        data-show-upload="false" accept=".fq,.fastq,.gz" >


                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-12">fastq 2 文件（右端）:</label>
                                    <div class=" col-sm-4 indent">
                                        <input id="input-2" type="file" class="file" name="file2" data-show-preview="false"
                                        data-show-upload="false" accept=".fq,.fastq,.gz" >
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-4">Trimmomatic PE(paired-end)(质控参数设置):
                                        <a onclick="openHelp()"  title="帮助文档" class="helpIcon">
                                            <i class="fa fa-question-circle-o"></i></a>
                                    </label>
                                    <div class="col-sm-1">
                                        <a id="down-1" style="margin-left: 2em">
                                            <i class="fa fa-arrow-down"></i>
                                        </a>
                                        <a id="up-1" style="margin-left: 2em;
                                            display: none">
                                            <i class="fa fa-arrow-up"></i>
                                        </a>
                                    </div>
                                </div>

                                <div id="set-1" style="display: none" class="indent">

                                    <div class="form-group">
                                        <p class="col-sm-5" style="text-indent: 1em;">
                                            Input FASTQ quality file scores encoding type:</p>
                                        <div class="col-sm-12 indent-3">
                                            <div class="col-sm-4">
                                                <select class="form-control" name="encondingType">
                                                    <option value="-phred64">Illumina 1.3-1.7 Phred+64</option>
                                                    <option value="-phred33" selected>Illumina 1.8+ Phred+33</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <p class="col-sm-5" style="text-indent: 1em;">
                                            Perform initial ILLUMINACLIP step?:</p>
                                        <div class="col-sm-12 indent-3">
                                            <div class="col-sm-4">
                                                <select class="form-control" name="stepMethod" onchange="stepChange(this)">
                                                    <option value="yes" selected>Yes</option>
                                                    <option value="no">No</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="stepValue">
                                        <div class="form-group" >
                                            <p class="col-sm-5 indent-1">Adapter sequences to use:</p>
                                            <div class="col-sm-12 indent-1">
                                                <div class="col-sm-4">
                                                    <select class="form-control" name="adapter">
                                                        <option value="TruSeq2-PE.fa">
                                                            TruSeq2 (paired-ended, for Illumina GAII)</option>
                                                        <option value="TruSeq3-PE.fa">
                                                            TruSeq3 (paired-ended, for MiSeq and HiSeq)</option>
                                                        <option value="TruSeq3-PE-2.fa" selected>
                                                            TruSeq3 (additional seqs) (paired-ended, for MiSeq and HiSeq)</option>
                                                        <option value="NexteraPE-PE.fa">Nextera (paired-ended)</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group" >
                                            <p class="col-sm-5 indent-1">
                                                Maximum mismatch count which will still allow a full match to be performed:</p>
                                            <div class="col-sm-12 indent-1">
                                                <div class="col-sm-4">
                                                    <input name="seed_mismatches" id="seed_mismatches" class="form-control" value="2" />
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group" >
                                            <p class="col-sm-5 indent-1">
                                                How accurate the match between the two 'adapter ligated' reads must be for PE palin
                                                drome read alignment:</p>
                                            <div class="col-sm-12 indent-1">
                                                <div class="col-sm-4">
                                                    <input name="palindrome_clip_threshold" id="palindrome_clip_threshold" class="form-control" value="30" />
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group" >
                                            <p class="col-sm-5 indent-1">
                                                How accurate the match between any adapter etc. sequence must be against a read:</p>
                                            <div class="col-sm-12 indent-1">
                                                <div class="col-sm-4">
                                                    <input name="simple_clip_threshold" id="simple_clip_threshold" class="form-control" value="10" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <p class="col-sm-5" style="text-indent: 1em;">
                                            Perform Sliding window trimming (SLIDINGWINDOW)?:</p>
                                        <div class="col-sm-12 indent-3">
                                            <div class="col-sm-4">
                                                <select class="form-control" name="trimMethod" onchange="trimChange(this)">
                                                    <option value="yes" selected>Yes</option>
                                                    <option value="no">No</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="trimValue">
                                        <div class="form-group" >
                                            <p class="col-sm-5 indent-1">
                                                Number of bases to average across:</p>
                                            <div class="col-sm-12 indent-1">
                                                <div class="col-sm-4">
                                                    <input name="window_size" id="window_size" class="form-control" value="20" />
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group" >
                                            <p class="col-sm-5 indent-1">
                                                Average quality required:</p>
                                            <div class="col-sm-12 indent-1">
                                                <div class="col-sm-4">
                                                    <input name="required_quality" id="required_quality" class="form-control" value="20" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <p class="col-sm-5" style="text-indent: 1em;">
                                            Drop reads below a specified length (MINLEN)?:</p>
                                        <div class="col-sm-12 indent-3">
                                            <div class="col-sm-4">
                                                <select class="form-control" name="minlenMethod" onchange="minlenChange(this)">
                                                    <option value="yes" selected>Yes</option>
                                                    <option value="no">No</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="minlenValue">
                                        <div class="form-group" >
                                            <p class="col-sm-5 indent-1">
                                                Minimum length of reads to be kept:</p>
                                            <div class="col-sm-12 indent-1">
                                                <div class="col-sm-4">
                                                    <input name="minlen" id="minlen" class="form-control" value="35" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <p class="col-sm-5" style="text-indent: 1em;">
                                            Cut bases off the start of a read, if below a threshold quality (LEADING)?:</p>
                                        <div class="col-sm-12 indent-3">
                                            <div class="col-sm-4">
                                                <select class="form-control" name="leadingMethod" onchange="leadingChange(this)">
                                                    <option value="yes">Yes</option>
                                                    <option value="no" selected>No</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="leadingValue" style="display: none">
                                        <div class="form-group" >
                                            <p class="col-sm-5 indent-1">
                                                Minimum quality required to keep a base:</p>
                                            <div class="col-sm-12 indent-1">
                                                <div class="col-sm-4">
                                                    <input name="leading" id="leading" class="form-control" value="3" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <p class="col-sm-5" style="text-indent: 1em;">
                                            Cut bases off the end of a read, if below a threshold quality (TRAILING)?:</p>
                                        <div class="col-sm-12 indent-3">
                                            <div class="col-sm-4">
                                                <select class="form-control" name="trailingMethod" onchange="trailingChange(this)">
                                                    <option value="yes" selected>Yes</option>
                                                    <option value="no">No</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="trailingValue">
                                        <div class="form-group" >
                                            <p class="col-sm-5 indent-1">
                                                Minimum quality required to keep a base:</p>
                                            <div class="col-sm-12 indent-1">
                                                <div class="col-sm-4">
                                                    <input name="trailing" id="trailing" class="form-control" value="20" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <p class="col-sm-5" style="text-indent: 1em;">
                                            Cut the read to a specified length (CROP):</p>
                                        <div class="col-sm-12 indent-3">
                                            <div class="col-sm-4">
                                                <select class="form-control" name="cropMethod" onchange="cropChange(this)">
                                                    <option value="yes">Yes</option>
                                                    <option value="no" selected>No</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="cropValue" style="display: none">
                                        <div class="form-group" >
                                            <p class="col-sm-5 indent-1">
                                                Number of bases to keep from the start of the read:</p>
                                            <div class="col-sm-12 indent-1">
                                                <div class="col-sm-4">
                                                    <input name="crop" id="crop" class="form-control" value="0" />
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="form-group">
                                        <p class="col-sm-5" style="text-indent: 1em;">
                                            Cut the specified number of bases from the start of the read (HEADCROP)?:</p>
                                        <div class="col-sm-12 indent-3">
                                            <div class="col-sm-4">
                                                <select class="form-control" name="headcropMethod" onchange="headcropChange(this)">
                                                    <option value="yes">Yes</option>
                                                    <option value="no" selected>No</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="headcropValue" style="display: none">
                                        <div class="form-group" >
                                            <p class="col-sm-5 indent-1">
                                                Number of bases to remove from the start of the read:</p>
                                            <div class="col-sm-12 indent-3">
                                                <div class="col-sm-4">
                                                    <input name="headcrop" id="headcrop" class="form-control" value="0" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class = "actions indent col-sm-4">
                                        <button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="Running()">
                                            导入</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="helpShow" class="modal fade modal-margin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" style="width: 1000px;">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h4 class="modal-title">
                            <span id="lblAddTitle" style="font-weight: bold">帮助文档：</span>
                            <button type="button" class="btn-remove" data-dismiss="modal" ><i class="fa fa-remove"></i></button>
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="row-fluid" id="logInfo">
                            <p class="helpClass">
                                分析模块封装了Trimmomatic工具，Trimmomatic是一个针对Illumina高通量测序的reads trim工具，支持paired-end（双末端）和single-end（单末端）数据。</p>

                            <p class="helpClass">Trimmomatic包括如下功能：</p>

                            <p class="helpClass"><strong>ILLUMINACLIP:</strong>
                                Cut adapter and other illumina-specific sequences from the read</p>

                            <p class="helpClass"><strong>SLIDINGWINDOW:</strong>
                                Perform a sliding window trimming, cutting once the average quality within the window falls below a threshold</p>

                            <p class="helpClass"><STRONG>MINLEN:</STRONG> Drop the read if it is below a specified length</p>

                            <p class="helpClass"><strong>LEADING:</strong>
                                Cut bases off the start of a read, if below a threshold quality</p>

                            <p class="helpClass"><strong>TRAILING:</strong>
                                Cut bases off the end of a read, if below a threshold quality</p>

                            <p class="helpClass"><strong>CROP:</strong> Cut the read to a specified length</p>

                            <p class="helpClass"><strong>HEADCROP:</strong>
                                Cut the specified number of bases from the start of the read</p>
                            <br>
                            <p class="helpClass">输入</p>
                            <br>
                            <p class="helpClass">对于single-end（单末端）数据，输入单个FASTQ文件。</p>

                            <p class="helpClass">对于paired-end（双末端）数据，输入两个FASTQ文件（R1和R2）。</p>
                            <br>
                            <p class="helpClass">设置质量值参数， Illumina 1.3-1.7 Phred+64 对应Illumina早期平台，Illumina 1.8+ Phred+33 对应Illumina最新平台，默认参数为：Illumina 1.8+ Phred+33。</p>
                            <br>
                            <p class="helpClass">附录：</p>
                            <br>
                            <p class="helpClass">对于常规的RNA或DNA测序，HiSeq4000或HiSeqXTen平台，PE100或PE150，建议使用如下参数设置：</p>
                            <p class="helpClass">Perform initial ILLUMINACLIP step：Yes</p>
                            <p class="helpClass">Maximum mismatch count which will still allow a full match to be performed：2</p>
                            <p class="helpClass">How accurate the match between the two 'adapter ligated' reads must be for PE palindrome read alignment：30</p>
                            <p class="helpClass">How accurate the match between any adapter etc. sequence must be against a read：10</p>
                            <p class="helpClass">Perform Sliding window trimming (SLIDINGWINDOW)：Yes</p>
                            <p class="helpClass">Number of bases to average across：20</p>
                            <p class="helpClass">Average quality required：20</p>
                            <p class="helpClass">Drop reads below a specified length (MINLEN)：Yes</p>
                            <p class="helpClass">Minimum length of reads to be kept：35</p>
                            <p class="helpClass">Cut bases off the end of a read, if below a threshold quality (TRAILING)：Yes</p>
                            <p class="helpClass">Minimum quality required to keep a base：20</p>
                            <p class="helpClass">即，去接头污染，比对允许的最大错配数为2，palindrome模式下匹配碱基数阈值为30，simple模式下的匹配碱基数阈值为10。过滤read尾部质量值20以下的碱基，设置20bp的窗口，如果窗口内的平均质量值低于20，从窗口开始截去后端碱基，过滤质控后35bp以下的read。</p>
                            <br>
                            <p class="helpClass">分析模块引用了Trimmomatic v0.32 软件(
                                <a target="_blank" href="http://www.usadellab.org/cms/index.php?page=trimmomatic">http://www.usadellab.org/cms/index.php?page=trimmomatic</a> )。</p>
                            <br>
                            <p class="helpClass">相关文献如下所示：</p>
                            <p class="helpClass">Bolger, A.M., Lohse, M., &amp; Usadel, B. (2014). Trimmomatic: A flexible trimmer for Illumina Sequence Data. Bioinformatics, btu170.</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>


                $(function () {
                    formValidation();
                })

                function openHelp() {
                    $("#helpShow").modal("show")
                }


                function formValidation() {
                    $('#UpdateForm').formValidation({
                        framework: 'bootstrap',
                        icon: {
                            valid: 'glyphicon glyphicon-ok',
                            invalid: 'glyphicon glyphicon-remove',
                            validating: 'glyphicon glyphicon-refresh'
                        },
                        fields: {
                            sample: {
                                validators: {
                                    notEmpty: {
                                        message: '不能为空!'
                                    },
                                    regexp: {
                                        regexp: '^[A-Za-z0-9"_"]{1,12}$',
                                        message: '12个以内字符，可使用字母、数字、下划线！'
                                    },
                                    stringLength: {
                                        message: '样品名长度最大为20！',
                                        max: function (value, validator, $field) {
                                            return 20 - (value.match(/\r/g) || []).length;
                                        }
                                    },
                                    remote: {
                                        type: 'POST',
                                        url: '/project/checkSample?proname=@proname',
                                        message: "样品名重复，请重新输入",
                                        delay: 1000
                                    }
                                }
                            },
                            file1: {
                                validators: {
                                    notEmpty: {
                                        message: '请选择一个数据文件！'
                                    },
                                    file: {
                                        extension: 'fq,gz,fastq',
                                        message: '文件格式：fq,fq.gz,fastq,fastq.gz！'
                                    }
                                }
                            },
                            file2: {
                                validators: {
                                    notEmpty: {
                                        message: '请选择一个数据文件！'
                                    },
                                    file: {
                                        extension: 'fq,gz,fastq',
                                        message: '文件格式：fq,fq.gz,fastq,fastq.gz！'
                                    }
                                }
                            },
                            seed_mismatches: {
                                validators: {
                                    notEmpty: {
                                        message: '不能为空！'
                                    },
                                    integer: {
                                        message: '必须为整数！'
                                    }
                                }
                            },
                            palindrome_clip_threshold: {
                                validators: {
                                    notEmpty: {
                                        message: '不能为空！'
                                    },
                                    integer: {
                                        message: '必须为整数！'
                                    }
                                }
                            },
                            simple_clip_threshold: {
                                validators: {
                                    notEmpty: {
                                        message: '不能为空！'
                                    },
                                    integer: {
                                        message: '必须为整数！'
                                    }
                                }
                            },
                            window_size: {
                                validators: {
                                    notEmpty: {
                                        message: '不能为空！'
                                    },
                                    integer: {
                                        message: '必须为整数！'
                                    }
                                }
                            },
                            required_quality: {
                                validators: {
                                    notEmpty: {
                                        message: '不能为空！'
                                    },
                                    integer: {
                                        message: '必须为整数！'
                                    }
                                }
                            },
                            minlen: {
                                validators: {
                                    notEmpty: {
                                        message: '不能为空！'
                                    },
                                    integer: {
                                        message: '必须为整数！'
                                    }
                                }
                            },
                            leading: {
                                validators: {
                                    notEmpty: {
                                        message: '不能为空！'
                                    },
                                    integer: {
                                        message: '必须为整数！'
                                    }
                                }
                            },
                            trailing: {
                                validators: {
                                    notEmpty: {
                                        message: '不能为空！'
                                    },
                                    integer: {
                                        message: '必须为整数！'
                                    }
                                }
                            },
                            crop: {
                                validators: {
                                    notEmpty: {
                                        message: '不能为空！'
                                    },
                                    integer: {
                                        message: '必须为整数！'
                                    }
                                }
                            },
                            headcrop: {
                                validators: {
                                    notEmpty: {
                                        message: '不能为空！'
                                    },
                                    integer: {
                                        message: '必须为整数！'
                                    }
                                }
                            }
                        }
                    })
                }


                $("#down-1").click(function () {
                    $("#set-1").show();
                    $("#down-1").hide();
                    $("#up-1").show()
                });

                $("#up-1").click(function () {
                    $("#set-1").hide();
                    $("#down-1").show();
                    $("#up-1").hide()
                });


                function stepChange(element) {
                    var value = $(element).find(">option:selected").val()
                    if (value == "yes") {
                        $("#stepValue").show()
                    } else {
                        $("#stepValue").hide()
                    }
                }

                function trimChange(element) {
                    var value = $(element).find(">option:selected").val()
                    if (value == "yes") {
                        $("#trimValue").show()
                    } else {
                        $("#trimValue").hide()
                    }
                }

                function minlenChange(element) {
                    var value = $(element).find(">option:selected").val()
                    if (value == "yes") {
                        $("#minlenValue").show()
                    } else {
                        $("#minlenValue").hide()
                    }
                }

                function leadingChange(element) {
                    var value = $(element).find(">option:selected").val()
                    if (value == "yes") {
                        $("#leadingValue").show()
                    } else {
                        $("#leadingValue").hide()
                    }
                }

                function trailingChange(element) {
                    var value = $(element).find(">option:selected").val()
                    if (value == "yes") {
                        $("#trailingValue").show()
                    } else {
                        $("#trailingValue").hide()
                    }
                }

                function cropChange(element) {
                    var value = $(element).find(">option:selected").val()
                    if (value == "yes") {
                        $("#cropValue").show()
                    } else {
                        $("#cropValue").hide()
                    }
                }

                function headcropChange(element) {
                    var value = $(element).find(">option:selected").val()
                    if (value == "yes") {
                        $("#headcropValue").show()
                    } else {
                        $("#headcropValue").hide()
                    }
                }

                var time = "";

                function Running() {
                    var date = new Date();
                    time = date.getTime();

                    var form = $("#UpdateForm")
                    var fv = form.data("formValidation")
                    fv.validate()
                    if (fv.isValid()) {
                        var element = "<div id='content'><span id='info'>文件上传中： </span><span id='progress'></span></div>";
                        var index = layer.msg(element, {
                            icon: 16
                            , shade: 0.01,
                            time: 20000000
                        });
                        var form = new FormData($("#UpdateForm")[0]);
                        $.ajax({
                            url: "@routes.SampleController.uploadPE()",
                            type: "post",
                            dataType: "json",
                            processData: false,
                            contentType: false,
                            data: form,
                            xhr: function () { //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数

                                myXhr = $.ajaxSettings.xhr();
                                if (myXhr.upload) { //检查upload属性是否存在
                                    //绑定progress事件的回调函数
                                    myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
                                }
                                return myXhr; //xhr对象返回给jQuery使用
                            },
                            success: function () {
                                window.location.replace("/transcriptome/sample/toDate?proname=@proname")
                            }
                        });
                    }
                }

                function progressHandlingFunction(e) {
                    if (e.lengthComputable) {
                        $('#progress').attr({value: e.loaded, max: e.total}); //更新数据到进度条
                        var mydate = new Date();
                        var time1 = mydate.getTime();
                        var speed = (e.loaded / 1024) / ((time1 - time) / 1000)
                        var percent = e.loaded / e.total * 100;
                        $('#progress').html(percent.toFixed(2) + "%   " + parseInt(speed) + "KB/S");
                        $('#progress').css('width', percent.toFixed(2) + "%");
                    }
                }


                $("#input-1").fileinput({
                    showPreview: false,
                    browseLabel: "选择文件"
                });

                $("#input-2").fileinput({
                    showPreview: false,
                    browseLabel: "选择文件"
                });

        </script>
    }